<template>
	<view class="container">
		<view class="search-add-bar">
			<view class="infoBox" @tap="searchContact">
				<text>共 <span style="color:  #3490fb;">{{qunList.length}} </span> 人</text>
			</view>
		</view>
		<view class="content-container">
			<view class="contact-list">
				<u-list @scrolltolower="scrolltolower" height="100%">
					<u-list-item v-for="(item,index) in qunList" :key="index" class="borderBottom">
						<view class="contact-item" @click="viewContact()">
							<!-- 	<u--image :showLoading="true" :src="" shape="circle" width="100rpx"
								height="100rpx"></u--image> -->
							<view class="contact-info">
								<text class="contact-name">{{item.name}}</text>
								<!-- <text class="contact-phone">入群方式：</text> -->
								<text class="contact-phone">入群时间：
									{{$formatTime(item.joinTime *1000,'YYYY-MM-DD HH:MM:SS')}}</text>

							</view>
							<view class="contact-actions">
								<u-tag text="群主" plain v-if="index ==0"> </u-tag>

								<view v-else class="action-btn chat-btn" @click="chatWith(item)">
									<u-icon name="chat" color="#fff" size="35"></u-icon>
								</view>
								<!-- 	<view class="action-btn call-btn" @click="callTo()">
									<u-icon name="phone" color="#1890ff" size="35"></u-icon>
								</view> -->
							</view>
						</view>
					</u-list-item>
				</u-list>
			</view>
		</view>
	</view>
</template>

<script>
	import wechatWorkSdkManager from '@/utils/enterpriseChatManager.js';
	export default {
		data() {
			return {
				qunList: [],
			}
		},
		onLoad(options) {
			if (options) {
				this.qunList = JSON.parse(options.data)
			}
			console.log(this.qunList, "群成员信息");
		},
		methods: {
			viewContact() {},
			chatWith(item) {
				console.log(item.invitor.userId, "item.invitor.userId");
				const param = {
					userIds: [`${item.invitor.userId}`],
				}
				const result = wechatWorkSdkManager.openEnterpriseChat(param);
			},
			callTo() {},
			formatTime(seconds) {
				const mins = Math.floor(seconds / 60);
				const secs = Math.floor(seconds % 60);
				return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
			}
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 0 20rpx;
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
	}

	.search-add-bar {
		display: flex;
		margin-bottom: 12rpx;
		gap: 20rpx;
	}

	.infoBox {
		padding: 20rpx;

	}


	.content-container {
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	.contact-list {
		background: white;
		height: 100%;
		// border-radius: 24rpx;
		// overflow: hidden;
		overflow-y: auto;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.08);
	}

	.borderBottom {
		border-bottom: 1rpx solid #f0f0f0;
	}

	.contact-item {
		display: flex;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
		flex-direction: row;
	}

	.borderBottom:last-child {
		border-bottom: none;
	}

	.contact-item:last-child {
		border-bottom: none;
	}

	.contact-info {
		flex: 1;
		margin-left: 20rpx;
	}

	.contact-name {
		font-size: 32rpx;
		font-weight: 500;
		margin-bottom: 8rpx;
		display: block;
	}

	.contact-phone {
		font-size: 24rpx;
		color: #666;
		margin-bottom: 8rpx;
		display: block;
	}

	.contact-actions {
		display: flex;
		gap: 16rpx;
	}

	.action-btn {
		width: 72rpx;
		height: 72rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.chat-btn {
		background: #2979ff;
	}

	.call-btn {
		background: #e6f7ff;
	}
</style>